<template>
    <div class="medical_grounp_list_dialog">
        <el-dialog v-model="isShowMedicalGroup" title="医疗点信息" width="35%" :close-on-click-modal="false"
            :destroy-on-close="true" @close="handleClose">
            <el-tabs v-model="activeTypeNameMedical" class="demo-tabs" @tab-click="handleMedicalGroupTypeClick">
                <el-tab-pane label="医生" name="medicalfirst">
                    <el-form :model="compState" :inline="true">
                        <el-form-item label="医疗点：">
                            <el-input v-model="medicalPointInpt1" placeholder="请输入医疗点" clearable
                                @input="HSearchMedicalPoint('d')"></el-input>
                        </el-form-item>
                        <el-form-item label="人员姓名：">
                            <el-input v-model="doctorInpt" placeholder="请输入人员姓名" clearable
                                @input="HSearchDoctor('d')"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-table :data="doctorDataCopy" style="width: 100%" height="500">
                        <el-table-column prop="personName" label="姓名" width="100" />
                        <el-table-column prop="medicalPointName" label="医疗点" />
                        <el-table-column prop="telephone" label="联系电话" width="180" />
                    </el-table>

                </el-tab-pane>
                <el-tab-pane label="护士" name="medicalsecond">
                    <el-form :model="compState" :inline="true">
                        <el-form-item label="医疗点：">
                            <el-input v-model="medicalPointInpt2" placeholder="请输入医疗点" clearable
                                @input="HSearchMedicalPoint('n')"></el-input>
                        </el-form-item>
                        <el-form-item label="人员姓名：">
                            <el-input v-model="nurseInpt" placeholder="请输入人员姓名" clearable
                                @input="HSearchDoctor('n')"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-table :data="nurseDataCopy" style="width: 100%" height="500">
                        <el-table-column prop="personName" label="姓名" width="100" />
                        <el-table-column prop="medicalPointName" label="医疗点" />
                        <el-table-column prop="telephone" label="联系电话" width="180" />
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script>
// 这里可以导入其他文件(比如: 组件、工具js、第三方插件js、json文件、图片文件...)
// 例如: import <组件名称> from '<组件路径>';
import { ref, reactive, toRefs, watch } from 'vue'
export default {
    // import 引入的组件需要注入到对象中才能使用
    components: {},
    props: ['showMedicalGroupFlag', 'doctorData', 'nurseData'],
    setup(props) {
        /**
         * 状态
         */
        const compState = reactive({
            isShowMedicalGroup: false,
            activeTypeNameMedical: "medicalfirst",
            doctorData: [],
            doctorDataCopy: [],
            nurseData: [],
            nurseDataCopy: [],
            doctorInpt: "",
            nurseInpt: "",
            medicalPointInpt1: "",
            medicalPointInpt2: ""
        })
        watch([() => props.showMedicalGroupFlag], ([newV]) => {
            // console.log('props.showMedicalGroupFlag', newV)
            // console.log(props.doctorData, props.nurseData)
            // compState.doctorData = props.doctorData
            // compState.nurseData = props.nurseData
            compState.doctorDataCopy = [...props.doctorData]
            compState.nurseDataCopy = [...props.nurseData]
            compState.isShowMedicalGroup = true
        })
        /**
         * 事件
         */
        // 筛选医生
        const HSearchDoctor = (val) => {
            if (val == 'd')
                // 遍历数据筛选赋值
                compState.doctorDataCopy = props.doctorData.filter((item) => {
                    // console.log(item);
                    return item.personName.search(compState.doctorInpt) != -1;
                });
            else
                compState.nurseDataCopy = props.nurseData.filter((item) => {
                    // console.log(item);
                    return item.personName.search(compState.nurseInpt) != -1;
                });
        };
        // 筛选医疗点
        const HSearchMedicalPoint = (val) => {
            if (val == 'd')
                // 遍历数据筛选赋值
                compState.doctorDataCopy = props.doctorData.filter((item) => {
                    // console.log(item);
                    return item.medicalPointName.search(compState.medicalPointInpt1) != -1;
                });
            else
                compState.nurseDataCopy = props.nurseData.filter((item) => {
                    // console.log(item);
                    return item.medicalPointName.search(compState.medicalPointInpt2) != -1;
                });
        };
        const handleClose = () => {
            compState.isShowMedicalGroup = false
            compState.activeTypeNameMedical = 'medicalfirst'
        }
        const handleMedicalGroupTypeClick = () => {
            console.log("handleMedicalGroupTypeClick")
        }
        const refState = toRefs(compState);
        return {
            // return 结构后的状态
            compState,
            ...refState,
            // return 事件
            handleClose,
            handleMedicalGroupTypeClick,
            HSearchDoctor,
            HSearchMedicalPoint
        }
    }
}
</script>
<style scoped></style>